<template>
	<div class="personal_center" id="app">
		<div id="body" style="text-align: center;border: 2px solid white;width: 500px;height: 400px;position: absolute;margin-left: 25%;">
			<h2>个人中心</h2>
			<div id="body" style="text-align: center;">
				<span>
					用户名：<input type="text" name="username" value="" style="background-color: #E1E2E2;"> </span>
				<br><br><button type="button" @click="shipping_address" style="background-color: #E1E2E2;">收货地址</button><br>
				<button type="button" @click="account_security" style="background-color: #E1E2E2;">账号安全</button><br>
				<button type="button" @click="notice" style="background-color: #E1E2E2;">通知</button><br>
				<button type="button" @click="bill" style="background-color: #E1E2E2;">账单</button><br>
				<button type="button" @click="privacy" style="background-color: #E1E2E2;">隐私</button><br>
				<button type="button" @click="about" style="background-color: #E1E2E2;">关于潇湘大药房</button><br>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: 'app',

		methods: {

			username() {
				var that = this
				//测试
				that.$router.push("/username")
			},
			shipping_address() {

				var that = this
				//测试
				that.$router.push("/shipping_address")
			},
			account_security() {
				var that = this
				//测试
				that.$router.push("/account_security")
			},
			notice() {
				var that = this
				//测试
				that.$router.push("/notice")
			},
			bill() {
				var that = this
				//测试
				that.$router.push("/bill")
			},
			privacy() {
				var that = this
				//测试
				that.$router.push("/privacy")
			},
			about() {
				var that = this
				//测试
				that.$router.push("/about")
			},

		}

	}
</script>

<style>
	.we {
		margin: auto;
		width: 70%;
		background-color: beige;
		margin-top: 15%;
		border: 1px solid grey;
	}

	.we h2 {
		text-align: center;
	}

	.we p {
		text-align: center;
	}

	.personal_center {
		margin: auto;
		width: 20%;
		border: 1px solid gray;
		margin-top: 10%;
	}

	.personal_center h2 {
		text-align: center;
		margin-bottom: 1rem;
		font-size: 1.5rem;

	}

	.personal_center span {
		margin-left: 10%;
	}

	.personal_center input {
		border: 1px none gray;
		width: 40%;
		margin-bottom: 0.5rem;
	}

	.personal_center button {
		margin: auto;
		border-radius: 10px;
		border: 2px solid gray;
		margin-bottom: 0.5rem;
		width: 70%;
		height: 30px;
	}

	.bill {
		margin: auto;
		width: 20%;
		background-color: beige;
		border-color: azure;
		margin-top: 15%;
	}

	.account {
		margin: auto;
		width: 20%;
		margin-top: 15%;
	}

	.notice {
		width: 20%;
		margin: auto;
		margin-top: 15%;
	}

	.privacy {
		width: 20%;
		margin: auto;
		margin-top: 15%;
	}
</style>
